<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>goodsList</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!--弹出层-->
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--bs组件    -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 align="center">商品列表</h1>

<div id = "app">
    <div class="row" style="width: 800px;margin: auto" >
        <div class="col-lg-6">
            <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="cha" @click="findOne" >查询</button>
      </span>
                <input type="text" id="select" class="form-control" placeholder="请输入商品Id">
            </div>
        </div>
    </div>
    <table width="800px" align="center" class="table table-striped">
        <tr>
            <td>商品Id</td>
            <td>商品名称</td>

        </tr>
        <tr id="page" v-for = "g,index in goodsTypeList" v-if = "index>=pageSize*(currentPage-1) & index<=pageSize*currentPage-1">
            <td>{{g.type_id}}</td>
            <td>{{g.type_name}}</td>
        </tr>
    </table>
    <div class="block" style="text-align: center">
        <el-pagination
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
        >
        </el-pagination>
    </div>

</div>



<script>

    axios.defaults.baseURL = "http://localhost:8080/web/"

    axios.interceptors.request.use(function (config) {
        config.headers.contentType = "application/json";
        return config;
    });
    let app = new Vue({
        el: "#app",
        created(){
            this.findAll();
        },
        data:{
            goodsTypeList:null,
            total:"",
            pageSize:2,
            currentPage:1,

        },
        methods: {
            findAll() {
                let self = this;
                axios.get("goodstype").then(function (response) {
                    if (response.data.code == 200) {
                        self. goodsTypeList = response.data.data;
                        self.total = self. goodsTypeList.length;
                        return
                    }
                    console.log("出错: " + response.data.msg);
                });
            },
            findOne(){

                let id=$("#select").val();
                let self = this;
                axios.get("goodstype/"+id).then(function (response) {
                    self.goodsTypeList=null;
                    if (response.data.code==200){
                        self. goodsTypeList = response.data.data;
                        console.log(self.goodsTypeList)
                        self.total = self. goodsTypeList.length;
                        return
                    }
                    console.log("出错: " + response.data.msg);
                })
            },
            handleCurrentChange(val) {
                this.findAll();
                this.currentPage = val;
                console.log("当前页: " + val);
            },
        },

    });
</script>
</body>
</html>